<template>
  <div class="more">
    <Options/>
    <div class="container">
      <div class="title">
        <div class="menu" @click="back">
          <i class="iconfont icon-link"></i>
          K.B商店
        </div>
        <i class="iconfont gengduo icon-more"></i>
        <p class="type">商品列表--{{title}}</p>
      </div>
      <div class="bar">
        <div @click="isChoose=true" :class="isChoose ? 'filter c333':'filter'">推荐</div>
        <div @click="handlePrice" :class="!isChoose ? 'filter c333':'filter'">
          价格
          <i v-show="isShow && !isChoose" class="iconfont icon-moreunfold"></i>
          <i v-show="!isShow && !isChoose" class="iconfont icon-less"></i>
        </div>
      </div>
      <div v-if="isChoose" class="list">
        <Item v-for="item of list" :key="item._id" :item="item"/>
      </div>
      <div v-if="!isChoose" class="list">
        <Item v-for="item of sortList" :key="item._id" :item="item"/>
      </div>
    </div>
  </div>
</template>

<script>
import KeyboardHttp from '../../models/KeyboardHttp.js'
import Item from '../../components/Item'
import Options from '../../components/Options'

export default {
  name:'More',
  components:{
    Item,
    Options
  },
  data() {
    return {
      title:'',
      list:[],
      sortList:[],
      isChoose:true,
      isShow:true
    }
  },
  created(){
    this.$bus.$emit('remove')
  },
  async mounted() {
    var {type} = this.$route.params
    var fn = this.handleQuery(type)
    var res = await KeyboardHttp[fn]();
    this.list = res.data.res
  },
  methods:{
    handleQuery(type){
       if(type == "switchs"){
        document.title = 'K.B 轴体列表'
        this.title = '轴体'
        return "getSwitchs"
      }else if(type == "gmk"){
        document.title = 'K.B 键帽列表'
        this.title = '键帽'
        return "getGmk"
      }else if(type == "box"){
        document.title = 'K.B 套件列表'
        this.title = '套件'
        return "getBox"
      }
    },
    handlePrice(){
      this.isChoose=false
      this.isShow = !this.isShow
      var list = JSON.parse(JSON.stringify(this.list))
      if(this.isShow){
        this.sortList = list.sort((a,b)=> b.price - a.price)
      }else{
        this.sortList = list.sort((a,b)=> a.price - b.price)
      }
    }
  }
}
</script>

<style scoped>
  .more{
    padding-top: 80px;
    background-color: #fff;
  }
  .title{
    display: flex;
    align-items: flex-end;
    margin-top: 60px;
    margin-bottom: 15px;
  }
  .menu{
    font-size: 18px;
    color: #596481;
    cursor: pointer;
  }
  .gengduo{
    font-size: 22px;
    font-weight: 800;
    margin: 0 20px;
  }
  .type{
    font-size: 36px;
    color: #596481;
  }
  .list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .bar{
    box-shadow: 0 3px 4px rgb(152 166 209 / 17%);
    color: #596481;
    padding: 0 20px;
    background: #fff;
    display: flex;
    align-items: center;
    margin: 20px 0;
  }
  .filter{
    height: 40px;
    color: #596481;
    padding: 11px 30px;
    cursor: pointer;
    font-size: 16px;
  }
  .c333{
    color: #333 !important;
    font-weight: 800;
  }
</style>